<template>
  <div class="sg-multi-select-container">
    <div class="sg-multi-select-header">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="isCheckedAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
    </div>
    <div class="sg-multi-select-list">
      <el-checkbox-group v-model="selectedItems" @change="handleCheckedChange">
        <div class="sg-multi-select-item" v-for="item in options" :key="item.key">
          <el-checkbox :label="item.key">{{ item.label }}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { inArray, removeValInArray } from "@/utils/util";
export default {
  name: "MultiSelect",
  props: {
    selectedOptions: {
      required: true,
      type: Array,
      defalut: []
    },
    options: {
      required: true,
      type: Array,
      defalut: []
    }
  },
  computed: {
    isIndeterminate: function() {
      return this.selectedOptions.length > 0 && this.selectedOptions.length < this.options.length
    },
    isCheckedAll: {
      get: function() {
        return this.selectedOptions.length === this.options.length
      },
      set: function(newVal) {
        
      }
    }
  },
  data: function() {
    return {
      selectedItems: this.selectedOptions
    }
  },
  watch: {
    selectedOptions(newVal) {
      this.selectedItems = newVal
    }
  },
  methods: {
    handleCheckAllChange(value) {
      let selectedItems = value ? this.options.map(item => item.key) : [];
      this.selectedItems = selectedItems
      this.$emit('checked-change', selectedItems)
    },
    handleCheckedChange(value) {
      this.$emit('checked-change', value)
    }
  }
};
</script>

<style scoped>
.sg-multi-select-container {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  width: 200px;
}
.sg-multi-select-header {
  border-bottom: 1px solid #ebeef5;
  background: #f2f6fc;
  padding: 0 16px;
}
.sg-multi-select-list {
  padding: 0 16px;
  height: 200px;
  overflow-y: scroll;
}
</style>
